<template>
  <div>
  <div>
    <el-button-group>
      <el-button type="primary" @click="getAllRemain">查看剩余房间</el-button>
      <el-button type="primary" @click="getAll">查看所有房间</el-button>
      <el-button type="primary" @click="getAllFull">查看营业中的房间</el-button>
      <el-button type="primary" @click="getStop">查看暂停营业房间</el-button>
      <el-button type="primary" @click="back">返回</el-button>
    </el-button-group>
  </div>
<div style="text-align: center" v-if="isShow">
  <el-table
      :data="rooms"
      border
      style="width: 100% ; margin: auto">
    <el-table-column
        prop="roomtype.typename"
        label="房间类型"
        width=100>
    </el-table-column>
    <el-table-column
        prop="rid"
        label="房间号"
        width="100">
    </el-table-column>
    <el-table-column
        prop="roomtype.describe"
        label="房间描述"
        width="150">
    </el-table-column>
    <el-table-column
        prop="roomtype.standardprice"
        label="此类型标价"
        width="100">
    </el-table-column>
    <el-table-column
        prop="extraprice"
        label="附加价格"
        width="150">
    </el-table-column>
    <el-table-column
        prop="status"
        label="房间状态"
        width="100">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="200">
      <template slot-scope="scope">
        <el-button v-if="isGetRemain" @click="handleClick(scope.row)" type="text">预订</el-button>
        <el-button @click="needrepaire(scope.row)" type="text">维护</el-button>
      </template>
      
    </el-table-column>
  </el-table>
</div>
    <br>
    <br>
    <br>
    <div v-if="isCreateOrder">
      <create-order :rid-num="eid"></create-order>
    </div>
    <div v-if="needrepaire">
      <roommaner :rid-num="eid"></roommaner>
    </div>
    
  </div>
</template>

<script>
import instance from "@/untils";
import CreateOrder from "@/views/order/CreateOrder";
import roommaner from "@/views/room/Roommaner";

export default {
  name: "Room",
  components: {
    CreateOrder,
  },
  data(){
    return{
      rooms:{},
      isShow:false,
      isGetRemain:false,
      isCreateOrder:false,
      needrepaire:false,
      eid:''
    }
  },
  methods:{
    getAll(){
      this.isShow=false;
      this.isGetRemain=false;
      this.isCreateOrder=false;
      this.needrepaire=false,
      instance.get("/room/getAll").then(res=>{
        if(res.data.status==200){
          this.rooms=res.data.data;
          this.isShow=true;
        }
      })
    },
    getAllRemain(){
      this.isShow=false;
      this.isGetRemain=true;
      this.isCreateOrder=false;
      this.needrepaire=false,
      instance.get("/room/getAllRemain").then(res=>{
        if(res.data.status==200){
          this.rooms=res.data.data;
          this.isShow=true;
        }
      })
    },
    getAllFull(){
      this.isGetRemain=false;
      this.isShow=false;
      this.isCreateOrder=false;
      this.needrepaire=false,
      instance.get("/room/getAllFull").then(res=>{
        if(res.data.status==200){
          this.rooms=res.data.data;
          this.isShow=true;
        }
      })
    },
    getStop(){
      this.isGetRemain=false;
      this.isShow=false;
      this.isCreateOrder=false;
      this.needrepaire=false,
      instance.get("/room/getStop").then(res=>{
        if(res.data.status==200){
          this.rooms=res.data.data;
          this.isShow=true;
        }
      })
    },
    handleClick(e){
      this.isGetRemain=false;
      this.isShow=false;
      this.isCreateOrder=true;
      this.needrepaire=false,
      this.eid=e.rid;
      console.log(e.rid);
    },
    needrepaire(e){
      this.isGetRemain=false;
      this.isShow=false;
      this.isCreateOrder=false;
      this.needrepaire=true,
      this.eid=e.rid;
 
    },
    back(){
      this.$router.push('/')
    }
  }

}
</script>

<style scoped>

</style>